
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <script src="iconfont.js"></script>

    <style type="text/css">
        .icon {
          /* 通过设置 font-size 来改变图标大小 */
          width: 1em; height: 1em;
          /* 图标和文字相邻时，垂直对齐 */
          vertical-align: -0.15em;
          /* 通过设置 color 来改变 SVG 的颜色/fill */
          fill: currentColor;
          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
             normalize.css 中也包含这行 */
          overflow: hidden;
        }

    </style>
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan1"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-add</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaolianjie"></use>
                    </svg>
                    <div class="name">超链接</div>
                    <div class="fontclass">#icon-chaolianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-msnui-copy-file"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#icon-msnui-copy-file</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon02"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-icon02</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon19"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-icon19</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-colon"></use>
                    </svg>
                    <div class="name">冒号</div>
                    <div class="fontclass">#icon-colon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-unie639"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-unie639</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shuzimaohao"></use>
                    </svg>
                    <div class="name">数字-冒号</div>
                    <div class="fontclass">#icon-shuzimaohao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maohaofont"></use>
                    </svg>
                    <div class="name">冒号font</div>
                    <div class="fontclass">#icon-maohaofont</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon50"></use>
                    </svg>
                    <div class="name">数字冒号</div>
                    <div class="fontclass">#icon-icon50</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia"></use>
                    </svg>
                    <div class="name">添加图标</div>
                    <div class="fontclass">#icon-jia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daima"></use>
                    </svg>
                    <div class="name">代码</div>
                    <div class="fontclass">#icon-daima</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconset0136"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-iconset0136</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhicopy20"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#icon-fuzhicopy20</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-5"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fengexian"></use>
                    </svg>
                    <div class="name">分隔线</div>
                    <div class="fontclass">#icon-fengexian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daimakuai"></use>
                    </svg>
                    <div class="name">代码_块</div>
                    <div class="fontclass">#icon-daimakuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu1"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-t2"></use>
                    </svg>
                    <div class="name">文本</div>
                    <div class="fontclass">#icon-t2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan2"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maohao"></use>
                    </svg>
                    <div class="name">冒号</div>
                    <div class="fontclass">#icon-maohao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-zhanghao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhi"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#icon-fuzhi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban1"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maohao1"></use>
                    </svg>
                    <div class="name">数字的冒号</div>
                    <div class="fontclass">#icon-maohao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhi1"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#icon-fuzhi1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu2"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-adduser"></use>
                    </svg>
                    <div class="name">add user</div>
                    <div class="fontclass">#icon-adduser</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daima1"></use>
                    </svg>
                    <div class="name">代码</div>
                    <div class="fontclass">#icon-daima1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu1"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaolianjie1"></use>
                    </svg>
                    <div class="name">超链接</div>
                    <div class="fontclass">#icon-chaolianjie1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaolianjie2"></use>
                    </svg>
                    <div class="name">超链接</div>
                    <div class="fontclass">#icon-chaolianjie2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-cmaohao"></use>
                    </svg>
                    <div class="name">c-冒号</div>
                    <div class="fontclass">#icon-cmaohao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan3"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daima2"></use>
                    </svg>
                    <div class="name">代码</div>
                    <div class="fontclass">#icon-daima2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daimakuai1"></use>
                    </svg>
                    <div class="name">代码块</div>
                    <div class="fontclass">#icon-daimakuai1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daima3"></use>
                    </svg>
                    <div class="name">代码</div>
                    <div class="fontclass">#icon-daima3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bmaohao"></use>
                    </svg>
                    <div class="name">b-冒号</div>
                    <div class="fontclass">#icon-bmaohao</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bmaohao-copy"></use>
                    </svg>
                    <div class="name">b-冒号</div>
                    <div class="fontclass">#icon-bmaohao-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maohao2"></use>
                    </svg>
                    <div class="name">冒号</div>
                    <div class="fontclass">#icon-maohao2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiayi"></use>
                    </svg>
                    <div class="name">下移</div>
                    <div class="fontclass">#icon-xiayi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangyi"></use>
                    </svg>
                    <div class="name">上移</div>
                    <div class="fontclass">#icon-shangyi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maohao3"></use>
                    </svg>
                    <div class="name">冒号</div>
                    <div class="fontclass">#icon-maohao3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-plus-edit"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-plus-edit</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenben"></use>
                    </svg>
                    <div class="name">文本</div>
                    <div class="fontclass">#icon-wenben</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu3"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-delete"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-delete</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maohao4"></use>
                    </svg>
                    <div class="name">冒号</div>
                    <div class="fontclass">#icon-maohao4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu4"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maohao5"></use>
                    </svg>
                    <div class="name">冒号</div>
                    <div class="fontclass">#icon-maohao5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu2"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao1"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-zhanghao1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao2"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-zhanghao2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao3"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-zhanghao3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fengexian1"></use>
                    </svg>
                    <div class="name">分隔线</div>
                    <div class="fontclass">#icon-fengexian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fengexian_icon"></use>
                    </svg>
                    <div class="name">分隔线_icon</div>
                    <div class="fontclass">#icon-fengexian_icon</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zyj-m-space"></use>
                    </svg>
                    <div class="name">分隔线</div>
                    <div class="fontclass">#icon-zyj-m-space</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu3"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu4"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maohao6"></use>
                    </svg>
                    <div class="name">冒号</div>
                    <div class="fontclass">#icon-maohao6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maohao-"></use>
                    </svg>
                    <div class="name">冒号-01</div>
                    <div class="fontclass">#icon-maohao-</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-miaoshucopy"></use>
                    </svg>
                    <div class="name">详细描述</div>
                    <div class="fontclass">#icon-miaoshucopy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fengexian2"></use>
                    </svg>
                    <div class="name">分隔线</div>
                    <div class="fontclass">#icon-fengexian2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu5"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu6"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-export"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-export</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaolianjie3"></use>
                    </svg>
                    <div class="name">超链接</div>
                    <div class="fontclass">#icon-chaolianjie3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao4"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-zhanghao4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaolianjie4"></use>
                    </svg>
                    <div class="name">基础-超链接</div>
                    <div class="fontclass">#icon-chaolianjie4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu7"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu8"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban2"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaolianjie5"></use>
                    </svg>
                    <div class="name">超链接</div>
                    <div class="fontclass">#icon-chaolianjie5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-PCchaolianjie"></use>
                    </svg>
                    <div class="name">PC超链接</div>
                    <div class="fontclass">#icon-PCchaolianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao5"></use>
                    </svg>
                    <div class="name">账号 (1)</div>
                    <div class="fontclass">#icon-zhanghao5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban3"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hengxian"></use>
                    </svg>
                    <div class="name">横线</div>
                    <div class="fontclass">#icon-hengxian</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-charuchaolianjie"></use>
                    </svg>
                    <div class="name">插入超链接</div>
                    <div class="fontclass">#icon-charuchaolianjie</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu9"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaolianjie6"></use>
                    </svg>
                    <div class="name">超链接</div>
                    <div class="fontclass">#icon-chaolianjie6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-text"></use>
                    </svg>
                    <div class="name">文本</div>
                    <div class="fontclass">#icon-text</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu5"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji3"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add1"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-add1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenben1"></use>
                    </svg>
                    <div class="name">文本</div>
                    <div class="fontclass">#icon-wenben1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu10"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu6"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu11"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-down-arrow"></use>
                    </svg>
                    <div class="name">箭头</div>
                    <div class="fontclass">#icon-down-arrow</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daima4"></use>
                    </svg>
                    <div class="name">代码</div>
                    <div class="fontclass">#icon-daima4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daima5"></use>
                    </svg>
                    <div class="name">恶意代码</div>
                    <div class="fontclass">#icon-daima5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-code"></use>
                    </svg>
                    <div class="name">代码</div>
                    <div class="fontclass">#icon-code</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon021"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-icon021</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daimakuai2"></use>
                    </svg>
                    <div class="name">代码块</div>
                    <div class="fontclass">#icon-daimakuai2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji1"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjia"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-tianjia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-source-code"></use>
                    </svg>
                    <div class="name">代码</div>
                    <div class="fontclass">#icon-source-code</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuanxiangshangjiantou"></use>
                    </svg>
                    <div class="name">上传 向上 箭头</div>
                    <div class="fontclass">#icon-shangchuanxiangshangjiantou</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao6"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-zhanghao6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu7"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-add2"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-add2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantou-copy"></use>
                    </svg>
                    <div class="name">上箭头</div>
                    <div class="fontclass">#icon-jiantou-copy</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chaolianjie7"></use>
                    </svg>
                    <div class="name">超链接</div>
                    <div class="fontclass">#icon-chaolianjie7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan4"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shangchuanxiangshangjiantou1"></use>
                    </svg>
                    <div class="name">上传 向上 箭头</div>
                    <div class="fontclass">#icon-shangchuanxiangshangjiantou1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhi2"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#icon-fuzhi2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenben2"></use>
                    </svg>
                    <div class="name">文本</div>
                    <div class="fontclass">#icon-wenben2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hengxian-xu"></use>
                    </svg>
                    <div class="name">横线-虚</div>
                    <div class="fontclass">#icon-hengxian-xu</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daima6"></use>
                    </svg>
                    <div class="name">代码</div>
                    <div class="fontclass">#icon-daima6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fengexian3"></use>
                    </svg>
                    <div class="name">分隔线</div>
                    <div class="fontclass">#icon-fengexian3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiajiahaowubiankuang"></use>
                    </svg>
                    <div class="name">添加 加号 无边框</div>
                    <div class="fontclass">#icon-tianjiajiahaowubiankuang</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-hengxian1"></use>
                    </svg>
                    <div class="name">横线</div>
                    <div class="fontclass">#icon-hengxian1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantou-xia"></use>
                    </svg>
                    <div class="name">上箭头</div>
                    <div class="fontclass">#icon-jiantou-xia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jia1"></use>
                    </svg>
                    <div class="name">添加</div>
                    <div class="fontclass">#icon-jia1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan5"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-jiantou-copy1"></use>
                    </svg>
                    <div class="name">上箭头</div>
                    <div class="fontclass">#icon-jiantou-copy1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianjifuben"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-bianjifuben</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji4"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuolan"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuolan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu8"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu12"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu12</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji5"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu9"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban4"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhi3"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#icon-fuzhi3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu13"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu13</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji6"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu10"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji7"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji8"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji9"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu14"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu14</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao7"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-zhanghao7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu15"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu15</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao8"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-zhanghao8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu16"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu16</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo1"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao9"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-zhanghao9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji2"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-maohaoxhdpi"></use>
                    </svg>
                    <div class="name">冒号xhdpi</div>
                    <div class="fontclass">#icon-maohaoxhdpi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-svg-daimakuai"></use>
                    </svg>
                    <div class="name">icon-svg-代码块</div>
                    <div class="fontclass">#icon-icon-svg-daimakuai</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-export1"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-export1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan6"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan6</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan7"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu17"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu17</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-ziyuan"></use>
                    </svg>
                    <div class="name">账号管理</div>
                    <div class="fontclass">#icon-ziyuan</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-shanchu11"></use>
                    </svg>
                    <div class="name">删除</div>
                    <div class="fontclass">#icon-shanchu11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo2"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo2</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo3"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan8"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan8</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-zhanghao10"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-zhanghao10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan9"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan9</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji10"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan10"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan10</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji11"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fengexian4"></use>
                    </svg>
                    <div class="name">分隔线</div>
                    <div class="fontclass">#icon-fengexian4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo4"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-sousuo5"></use>
                    </svg>
                    <div class="name">搜索</div>
                    <div class="fontclass">#icon-sousuo5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-icon-test"></use>
                    </svg>
                    <div class="name">详细信息</div>
                    <div class="fontclass">#icon-icon-test</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji12"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji12</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daima7"></use>
                    </svg>
                    <div class="name">代码</div>
                    <div class="fontclass">#icon-daima7</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-moban5"></use>
                    </svg>
                    <div class="name">模板</div>
                    <div class="fontclass">#icon-moban5</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-chakan11"></use>
                    </svg>
                    <div class="name">查看</div>
                    <div class="fontclass">#icon-chakan11</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiangxi"></use>
                    </svg>
                    <div class="name">详细</div>
                    <div class="fontclass">#icon-xiangxi</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconzh1"></use>
                    </svg>
                    <div class="name">账号</div>
                    <div class="fontclass">#icon-iconzh1</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-fuzhi4"></use>
                    </svg>
                    <div class="name">复制</div>
                    <div class="fontclass">#icon-fuzhi4</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daochu18"></use>
                    </svg>
                    <div class="name">导出</div>
                    <div class="fontclass">#icon-daochu18</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji13"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji13</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wenben3"></use>
                    </svg>
                    <div class="name">文本</div>
                    <div class="fontclass">#icon-wenben3</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji14"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji14</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-bianji15"></use>
                    </svg>
                    <div class="name">编辑</div>
                    <div class="fontclass">#icon-bianji15</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-tianjiajia"></use>
                    </svg>
                    <div class="name">添加 加</div>
                    <div class="fontclass">#icon-tianjiajia</div>
                </li>
            
                <li>
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-daimakuai3"></use>
                    </svg>
                    <div class="name">代码块</div>
                    <div class="fontclass">#icon-daimakuai3</div>
                </li>
            
        </ul>


        <h2 id="symbol-">symbol引用</h2>
        <hr>

        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
        <ul>
          <li>支持多色图标了，不再受单色限制。</li>
          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
          <li>浏览器渲染svg的性能一般，还不如png。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
.icon {
   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
   vertical-align: <span class="hljs-number">-0.15</span>em;
   fill: currentColor;
   overflow: hidden;
}
&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
</span>&lt;<span class="hljs-regexp">/svg&gt;
        </span></code></pre>
    </div>
</body>
</html>
